<template>
	<!-- 订单 -->
	<view class="order-list-page">
		<custom-title-bar bgColor="white"> 我的订单 </custom-title-bar>
		<!-- 订单列表切换 -->
		<wd-tabs v-model="activeTab" swipeable>
			<block v-for="(item, index) in tabList" :key="index">
				<wd-tab :title="item">
					<!-- 订单列表 -->
					<view class="order-list">
						<!-- 没有订单 -->
						<view class="no-order flex-center">
							<image class="no-order-img" src="/static/images/not-found.png" mode="aspectFill" />
							<text class="desc">您暂时还没有订单哦 ~</text>
							<view class="go flex-center" @click="toOrderDetail">
								<text>去点单</text>
							</view>
						</view>
					</view>
				</wd-tab>
			</block>
		</wd-tabs>

		<!-- 自定义 tabBar -->
		<custom-tabbar />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const activeTab = ref(0);
	const tabList = ['全部订单', '堂食订单', '外卖订单'];

	// 前往订单详情
	const toOrderDetail = () => {
		uni.navigateTo({
			url: '/pages/order-detail/order-detail'
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.wd-tabs__nav-container) {
		.wd-tabs__nav-item-text {
			font-size: 26rpx;
			color: $primary-color;
		}

		.wd-tabs__line {
			bottom: 0;
			width: 40rpx;
			height: 4rpx;
			background-color: $primary-color;
		}
	}

	:deep(.wd-tabs) {
		background: transparent !important;
	}

	// 订单列表
	.order-list {
		padding: 20rpx;

		// 没有订单
		.no-order {
			margin-top: 200rpx;
			flex-direction: column;

			.no-order-img {
				width: 446rpx;
				height: 240rpx;
			}

			.desc {
				color: #a2a2a2;
				font-size: 26rpx;
				margin-top: 140rpx;
			}

			.go {
				color: #fff;
				width: 400rpx;
				height: 88rpx;
				font-size: 32rpx;
				margin-top: 36rpx;
				border-radius: 44rpx;
				background-color: $primary-color;
			}
		}
	}
</style>